import './App.css';

const myname = "法外狂徒张三";
const flag = true;
const title = (
	<h2>哈哈哈哈JSX的代表片段内容</h2>
)
const person = {
	name:"李四",
	age:18
}
function run () {
	return "这个是函数"
}
const arr1 = [
	{id:1,name:"橘子"},
	{id:2,name:"苹果"},
	{id:3,name:"香蕉"},
	{id:4,name:"西瓜"},
	{id:5,name:"菠萝"}
]
const arr2 = ["abc","def","hig","jml"];

//判断的函数
const isShow = (flag)=>{
	if (flag) {
		return <div>flag为真这里是显示的内容</div>
	} else{
		return <div>flag为假这里是不显示的内容</div>
	}
}

//循环的函数
const isShow2 = (arr)=>{
	return arr.map((item,index)=>{
		return <h1 key={index}>遍历的水果:{item.name}</h1>
	})
}

const h1 = (
	<div>
		<h1 className="hh1">这里是我的jsx代码
			<span id="sp01">这里是橘色的文字!</span>
		</h1>
		{/* 这里是注释的内容 这里有个单标签*/}
		<div />
		<h1>react中的文本插值 {myname}</h1>
		<h1>文本插值js表达式 {flag?"flag是真值":"flag是假值"}</h1>
		{ /* 这里是直接使用一个jsx的代码 */ }
		{title}
		<h1>react中对象的值 {person.name},{person.age}</h1>
		{ /* 这里不可以使用if for等语句 */ }
		{ /* 这里可以运行js函数实现if条件 */ }
		<h1>react中插入js函数{run()}</h1>
		<h2>if条件的结果{isShow(flag)}</h2>
		{isShow2(arr1)}
		<h1 style={{backgroundColor:"red",color:"yellow"}}>这里是行内样式的内容呀</h1>
	</div>
);



function App() {
	
	return title;
}

export default App;